<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slot</title>
</head>
<body>
    <say-hi>
        <span slot="username">Jessica</span>
    </say-hi>
    <template id="sayHi">
        <h1>Hi, <slot name="username"></slot></h1>
    </template>
    <script>
        class SayHi extends HTMLElement {
            constructor() {
                super();
                const shadowDOM = this.attachShadow({mode: 'open'});
                const templateDOM = document.getElementById('sayHi');
                const cloneTemplate = templateDOM.content.cloneNode(true);
                const style = document.createElement('style');
                style.innerHTML = `
                    h1{
                        color: #f498b2;
                    }
                `
                shadowDOM.appendChild(style);
                shadowDOM.appendChild(cloneTemplate);


                const slot = shadowDOM.querySelector("slot[name='username']");
                slot.addEventListener("slotchange", (event) => {
                    console.log(event.target)
                    const elements = event.target.assignedElements();
                    elements.forEach((child) => {
                        console.log(child)
                        console.log(child.textContent)
                        console.log(child.tagName)
                        console.log(child.localName)
                    });
                    const nodes = event.target.assignedNodes();
                    nodes.forEach((child) => {
                        console.log(child)
                        console.log(child.textContent)
                        console.log(child.tagName)
                        console.log(child.localName)
                    });
                })

            }
        }
        customElements.define('say-hi', SayHi);
    </script>
</body>
</html>